<template>
	<view class="body-view d-flex d-c" style="background-color: #ffffff;">
		<!--导航和状态栏-->
		<view class="state-navigation" style="background: none;z-index: 5;">
		    <view class="slim_header_navigation d-flex a-center j-center">
		        <view class="left_box" @tap="goBack">
		            <image src="/static/center/back.png" class="back"></image>
		        </view>
		        <view class="title" style="color: #ffffff;"></view>
		        <view class="right_box">
		        </view>
		    </view>
		</view>
		<view style="height:calc(100rpx + var(--status-bar-height));"></view>
		<view class="body-content d-flex d-c a-center">
			<!-- 我为发起人时显示-->
			<template v-if="userData.id==dataInfo?.userId">
				<!--图标 未领取-->
				<i v-if="dataInfo?.status===0" class="icon icon-24gf-clockCircle" style="font-size: 90rpx;color: #1DC691;"></i>
				<!--图标 已领取-->
				<i v-if="dataInfo?.status===1" class="icon icon-shixinduihao" style="font-size: 85rpx;color: #1DC691;"></i>
				<!--图标 已过期-->
				<i v-if="dataInfo?.status===2" class="icon icon-tixingshixin" style="font-size: 90rpx;color: #FF5831;"></i>
				<!--图标 已退还-->
				<i v-if="dataInfo?.status===3" class="icon icon-fanhui1" style="font-size: 85rpx;color: #FFC544;"></i>
				<!--昵称 未领取-->
				<view v-if="dataInfo?.status===0" class="content-nickname">待{{nickName(dataInfo?.directUserId,dataInfo?.directUserName)}}收款</view>
				<!--昵称 已领取-->
				<view v-if="dataInfo?.status===1" class="content-nickname">{{nickName(dataInfo?.directUserId,dataInfo?.directUserName)}}已收款</view>
				<!--昵称 已过期-->
				<view v-if="dataInfo?.status===2" class="content-nickname">{{nickName(dataInfo?.directUserId,dataInfo?.directUserName)}}过期未收款，已退还</view>
				<!--昵称 已退还-->
				<view v-if="dataInfo?.status===3" class="content-nickname">{{nickName(dataInfo?.directUserId,dataInfo?.directUserName)}}已退款</view>
			</template>
			
			<!-- 我为接收人时显示-->
			<template v-if="userData.id==dataInfo?.directUserId">
				<!--图标 未领取-->
				<i v-if="dataInfo?.status===0" class="icon icon-shizhong" style="font-size: 85rpx;color: #1DC691;"></i>
				<!--图标 已领取-->
				<i v-if="dataInfo?.status===1" class="icon icon-shixinduihao" style="font-size: 85rpx;color: #1DC691;"></i>
				<!--图标 已过期-->
				<i v-if="dataInfo?.status===2" class="icon icon-tixingshixin" style="font-size: 90rpx;color: #FF5831;"></i>
				<!--图标 已退还-->
				<i v-if="dataInfo?.status===3" class="icon icon-fanhui1" style="font-size: 85rpx;color: #FFC544;"></i>
				<!--昵称 未领取-->
				<view v-if="dataInfo?.status===0" class="content-nickname">待你收款</view>
				<!--昵称 已领取-->
				<view v-if="dataInfo?.status===1" class="content-nickname">你已收款，资金已存入零钱</view>
				<!--昵称 已过期-->
				<view v-if="dataInfo?.status===2" class="content-nickname">过期未收款，已退还</view>
				<!--昵称 已退款-->
				<view v-if="dataInfo?.status===3" class="content-nickname">你已退还</view>
			</template>
			<!-- 我不是接收人也不是发起人-->
			<template v-if="userData.id!=dataInfo?.userId&&userData.id!=dataInfo?.directUserId">
				<!--图标 未领取-->
				<i v-if="dataInfo?.status===0" class="icon icon-shizhong" style="font-size: 80rpx;color: #1DC691;"></i>
				<!--图标 已过期-->
				<i v-if="dataInfo?.status===2" class="icon icon-tixingshixin" style="font-size: 90rpx;color: #FF5831;"></i>
				<view class="content-nickname">{{nickName(dataInfo?.userId,dataInfo?.userName)}}向{{nickName(dataInfo?.directUserId,dataInfo?.directUserName)}}发起的转账</view>
			</template>
			
			<view class="content-money d-flex">
				<view class="content-money-symbol">￥</view>
				<view class="content-money-number">{{centToYuan(dataInfo?.amount)}}</view>
			</view>
			<!--描述   我为发起转账人时状态-->
			<template v-if="userData.id==dataInfo?.userId">
				<!--未领取-->
				<view v-if="dataInfo?.status===0" class="content-describe">1天内对方未收款，将退还给你</view>
				<!--已过期-->
				<view v-if="dataInfo?.status===2" class="content-describe">已退到零钱</view>
				<!--已退款-->
				<view v-if="dataInfo?.status===3" class="content-describe">已退到零钱</view>
			</template>
			<view style="height: 60rpx;"></view>
			<view class="content-divider"></view>
			
			<!-- 我不是接收人也不是发起人-->
			<template v-if="userData.id!=dataInfo?.userId&&userData.id!=dataInfo?.directUserId">
				<view class="content-date d-flex j-between">
					<view class="content-date-left">转账状态</view>
					<view v-if="dataInfo?.status===0" class="content-date-right">待收款方收款</view>
					<view v-if="dataInfo?.status===2" class="content-date-right">收款方过期未收款，已退还</view>
				</view>
			</template>
			
			<view class="content-date d-flex j-between">
				<view class="content-date-left">转账时间</view>
				<view class="content-date-right">{{moment(dataInfo?.createTime, "YYYY-MM-DD HH:mm:ss").format('YYYY年MM月DD日 HH:mm:ss')}}</view>
			</view>
			<view v-if="dataInfo?.status===1" class="content-date d-flex j-between">
				<view class="content-date-left">收款时间</view>
				<view class="content-date-right">{{moment(dataInfo?.updateTime, "YYYY-MM-DD HH:mm:ss").format('YYYY年MM月DD日 HH:mm:ss')}}</view>
			</view>
			<view v-if="dataInfo?.status===2" class="content-date d-flex j-between">
				<view class="content-date-left">退款时间</view>
				<view class="content-date-right">{{moment(dataInfo?.updateTime, "YYYY-MM-DD HH:mm:ss").format('YYYY年MM月DD日 HH:mm:ss')}}</view>
			</view>
			<view v-if="dataInfo?.status===3" class="content-date d-flex j-between">
				<view class="content-date-left">退款时间</view>
				<view class="content-date-right">{{moment(dataInfo?.updateTime, "YYYY-MM-DD HH:mm:ss").format('YYYY年MM月DD日 HH:mm:ss')}}</view>
			</view>
		</view>
		<view v-if="userData.id==dataInfo?.directUserId&&dataInfo?.status===0" class="body-button d-flex d-c a-center">
			<tm-button :width="280" :round="5" :height="80" :shadow="-1"
			    :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" @tap="operate(1)"
			    label="收款"></tm-button>
			<view class="body-button-describe d-flex a-center">
				<view class="button-describe-text">1天内未确认，将退还给对方。</view>
				<view @tap="refund" class="button-describe-button">退还</view>
			</view>
		</view>
	</view>
	<!--确认控件-->
	<uni-popup ref="refundPopup" type="bottom" :safe-area="false">
	    <view class="sys-confirm-content">
			<view class="confirm-content-title">退还你好。的转账？</view>
			<view  @tap="confirmChoose" class="content-button button-confirm" style="color: #FD5745;">退还</view>
			<view style="height: 20rpx; background: #f5f5f5"></view>
			<view @tap="refundPopup.close" class="content-button" style="color: #999999;">取消</view>
	    </view>
	</uni-popup>
</template>

<script setup lang="tsx">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getTransferDetails,receiveTransfer } from "@/api/api";
import { userData as userDataStore } from "@/store/userData";
import { centToYuan } from "@/utils/format";
import moment from 'moment';
import { imStore } from "@/store/imStore";

const userData: any = userDataStore();
const goBack = () => {
    uni.navigateBack();
};
const dataInfo:any = ref()
const transferId = ref()
onLoad((options:any) => {
	transferId.value = options.transferId;
	loadData()
})
const loadData = () => {
	let params = {
		transferId:transferId.value
	}
	getTransferDetails(params).then((res:any) => {
		if(res.success){
			dataInfo.value = res.data
			saveStatus()
		}
	})
}

const operate = (type:number) => {
	let params = {
		type:type,
		transferId:transferId.value
	}
	receiveTransfer(params).then((res:any) => {
		if(res.success){
			loadData()
		}
	})
}
//客户端存储领取状态
const saveStatus = () => {
	let key = dataInfo.value.transferId + userData.id
	let status = dataInfo.value.status;
	/*
	if(userData.id!=dataInfo.value.userId&&userData.id!=dataInfo.value.directUserId){
		status = -1
	}
	*/
	uni.setStorageSync(key , status);
}
const refundPopup = ref()
const refund = () => {
	refundPopup.value.open()
}
const confirmChoose = () => {
	operate(2)
	refundPopup.value.close()
}
const IM_STORE = imStore();
const nickName = (userId:string,nick:string) => {
	let remark = null;
	let nameCard = null;
	IM_STORE.friends.forEach((f: any) => {
		if (f.userID === userId) {
			remark = f.remark;
		}
	});
	let type  = IM_STORE?.conversation?.type;
	if (type === "GROUP") {
		let userData:any = IM_STORE?.groupMembers.find((item:any) => item.userID === userId);
		if(userData?.nameCard !='')nameCard = userData?.nameCard
	}
	return remark || nameCard || nick;
};
</script>

<style lang="scss" scoped>
@import "./transferDetails.scss";
</style>